<template>
    <div>
        <el-dialog :model-value="dialogFormVisible" title="编辑货品信息" @close="hdClose" width="40%">
            <el-form :model="form">
                <el-form-item label="商品货号">
                    <el-input v-model="form.keyword" autocomplete="off" placeholder="按sku编号搜索"
                        style="width: 60%; margin-left: 20px;">
                        <template #append>
                            <el-button :icon="Search" @click="searchSku" />
                        </template>
                    </el-input>
                </el-form-item>
            </el-form>
            <!-- SKU库存table -->
            <el-table :data="gridData" style="width: 100%;">
                <el-table-column property="date" label="SKU编号" width="280" />
                <el-table-column property="name" label="销售价格" />
                <el-table-column property="address" label="商品库存" />
                <el-table-column property="address" label="库存预警值" />
            </el-table>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="hdCancel">取消</el-button>
                    <el-button type="primary" @click="hdConfirm">
                        确定
                    </el-button>
                </span>
            </template>
        </el-dialog>
    </div>
</template>

<script setup lang="ts">
import { reactive, ref, watch } from 'vue';
import { Search } from '@element-plus/icons-vue'
import * as http from '@/request/http'

//搜索框sku的值
const form = reactive({
    keyword: ''
})
//SKU库存table
const gridData = ref<any[]>([])
//接收的商品列表id和显隐
const props = withDefaults(defineProps<{ dialogFormVisible: boolean, id: number }>(), {
    dialogFormVisible: false, id: 0
})

const emit = defineEmits<{
    (e: 'cancel'): void
    (e: 'confirm'): void
}>()
const hdCancel = () => {
    emit("cancel")
}
const hdClose = () => {
    emit("cancel")
}
const hdConfirm = () => {
    emit("confirm")
}
const searchSku = () => {
    http.product.productSkuId(props.id, form.keyword).then(res => {
        if (res.code == 200) {

        }
    })
}
//根据id获取sku库存信息
watch(
    () => props.id,
    () => {
        if (props.id != 0) {
            http.product.productSkuId(props.id, form.keyword).then(res => {
                if (res.code == 200) {

                }
            })
        }
    }
)
</script>

<style scoped></style>